<template>
	<view class="position-relative">
		<!-- 我的余额 -->
		<view class="border-top border-bottom py-4 px-2" style="height: 400rpx;width: 750rpx;">
			<view class="bg-main flex justify-center flex-column align-center text-white" style="height: 100%;">
				<view class="">您的余额</view>
				<view class="font-lgg mt-2 ">55</view>
			</view>
		</view>
		<!-- 充值区 -->
		<view class="px-2 py-3 text-dark">请选择您充值的金额</view>
		<view class="flex flex-wrap">
			<view
				class="flex flex-column justify-center align-center rounded border moneyStyle"
				:class="moneySelected === index ? 'moneySelectedStyle' : ''"
				v-for="(item, index) in price"
				:key="index"
				@click="chooseMoney(index)"
			>
				<view class="flex align-center">
					<text class="iconfont text-warning" style="font-size: 50rpx;">&#xe633;</text>
					<view class="font-lgg text-light-black ml-1 font-weight-bold">{{ item.num }}</view>
				</view>
				<view class="font-md">{{ item.num }}</view>
			</view>
			<view
				class="flex text-light-black font-weight-bold justify-center font-lg align-center rounded border moneyStyle"
				:class="moneySelected === 6 ? 'moneySelectedStyle' : ''"
				@click="chooseMoney(6)"
			>
				自定义
			</view>
		</view>
		<!-- 底部功能栏 -->
		<view class="position-fixed  right-0 left-0  bottom-0 border-top flex justify-between align-center" style="height: 100rpx;">
			<view class="ml-4 flex align-center">
				<text class="iconfont text-warning" style="font-size: 50rpx;">&#xe633;</text>
				<text class="font-md mr-1">{{ priceNumSe }}</text>
			</view>
			<view class="mr-4"><button type="primary" size="mini">充值</button></view>
		</view>
		<!-- 弹框 -->
		<view>
			<u-modal v-model="show" show-cancel-button @confirm="doConfirm">
				<view class=""  style="width: 80%;" >
					<u-input v-model="value" :type="type" placeholder="请输入金额" />
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			moneySelected: null,
			price: [
				{
					num: 10
				},
				{
					num: 20
				},
				{
					num: 50
				},
				{
					num: 100
				},
				{
					num: 200
				}
			],
			priceNumSe: null,
			show: false,
			content: '东临碣石，以观沧海',
			value: null,
			type: 'text',
			border: true
		};
	},
	methods: {
		// 确认自定义金额
		doConfirm(){
			this.priceNumSe=this.value
		},
		// 打开dialog
		open() {
			this.value=null
			this.show = true;
		},
		// 选择金钱数目
		chooseMoney(index) {
			if (index === 6) {
				this.priceNumSe = null;
				this.open();
				// 弹起价格输入弹框
			} else {
				this.priceNumSe = this.price[index].num;
			}
			this.moneySelected = index;
		}
	}
};
</script>

<style>
.moneyStyle {
	width: 220rpx;
	height: 180rpx;
	margin: 10rpx 15rpx;
}
.moneySelectedStyle {
	background-color: #ba7ace;
}
</style>
